import React, { memo, useState } from "react";
import { useNavigate } from "react-router-dom";
import { Menu } from "antd";
import type { MenuProps } from "antd";
import { AsideContainer } from "./style";
import {
  AppstoreOutlined,
  SettingOutlined,
  DashboardOutlined,
  HomeOutlined
} from "@ant-design/icons";
import { useCollapse } from "@/views/context/CollapseContext";
type MenuItem = Required<MenuProps>["items"][number];

const items: MenuItem[] = [
  {
    key: "home",

    label: "首页",
    icon: <HomeOutlined />,
    children: [
      { key: "/dashboard/index", label: "仪表板", icon: <DashboardOutlined /> }
    ]
  },
  {
    key: "user",
    label: "用户管理",
    icon: <AppstoreOutlined />,
    children: [{ key: "/user/list", label: "用户列表" }]
  },

  {
    key: "sub4",
    label: "Navigation Three",
    icon: <SettingOutlined />,
    children: [
      { key: "9", label: "Option 9" },
      { key: "10", label: "Option 10" },
      { key: "11", label: "Option 11" },
      { key: "12", label: "Option 12" }
    ]
  }
];
const Aside = memo(() => {
  const { collapsed } = useCollapse();
  const navigate = useNavigate();
  const [defaultSelectedKeys, setDefaultSelectedKeys] = useState([
    "/dashboard/index"
  ]);
  const [defaultOpenKeys, setDefaultOpenKeys] = useState(["home"]);
  const onClick: MenuProps["onClick"] = (e) => {
    setDefaultSelectedKeys([e.key]);
    setDefaultOpenKeys([e.key]);
    navigate(e.key);
  };
  return (
    <AsideContainer>
      <Menu
        onClick={onClick}
        style={{ width: collapsed ? 80 : 256 }}
        defaultSelectedKeys={defaultSelectedKeys}
        defaultOpenKeys={defaultOpenKeys}
        mode="inline"
        inlineCollapsed={collapsed}
        items={items}
      />
    </AsideContainer>
  );
});

export default Aside;
